<!--
 * @Author: 码上talk|RC
 * @Date: 2021-10-16 14:03:11
 * @LastEditTime: 2021-10-19 11:32:51
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-portal/subpackage/axq/pages/video/_id.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <view class="video-info">
    <view class="video-card">
      <view class="wrap">
        <video
          :src="videoInfo.downloadUrls | videoUrl"
          object-fit="fill"
          show-mute-btn
          :poster="videoInfo.thumbnail | thumbnail"
          vslide-gesture-in-fullscreen
        ></video>
      </view>
      <view class="title">{{ black_Get(videoInfo,'title') }}</view>
      <view class="btm">
        <view class="share" @tap="shareVideo(videoInfo)">
          <image class="icon" :src="'icon/share.png' | prefixOssUrl" />
          <button class="share-btn" open-type="share">分享</button>
        </view>
        <view class="like" @tap="developing">
          <image class="icon" :src="likeImg" />
          <text>{{ black_Get(videoInfo,'thumbsUpCount','0') | numberFormat }}</text>
        </view>
      </view>
    </view>
    <view class="v-more">更多视频</view>
    <view class="video-card" v-for="(v,i) in recommendVideoList" :key="i">
      <view class="wrap">
        <video
          :src="v.downloadUrls | videoUrl"
          object-fit="fill"
          show-mute-btn
          :poster="v.thumbnail | thumbnail"
          vslide-gesture-in-fullscreen
        ></video>
      </view>
      <view class="title">{{ black_Get(v,'title') }}</view>
      <view class="btm">
        <view class="share" @tap="shareVideo(v)">
          <image class="icon" :src="'icon/share.png'|prefixOssUrl" />
          <button class="share-btn" open-type="share">分享</button>
        </view>
        <view class="like" @tap="developing">
          <image class="icon" :src="likeImg" />
          <text>{{ black_Get(v,'thumbsUpCount','0') | numberFormat }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import _ from 'lodash'
import {
  appConfig
} from '@/config/app'

let ossUrl = appConfig.ossUrl;
import {
  model
} from '@/model';

const {
  AxqVideo
} = model.collection;

export default {
  data () {
    return {
      id: '',
      title: '',
      thumbnail: '',
      videoInfo: {},
      recommendVideoList: []
    }
  },
  onLoad (options) {
    this.getVideoInfo(options.id)
  },
  onShareAppMessage (res) {
    if (res.from === 'button') {
      const promise = new Promise(resolve => {
        setTimeout(() => {
          resolve({
            title: this.title,
            imageUrl: this.thumbnail,
            path: '/pages/index/index?redType=axqVideo&id=' + this.id,
          })
        }, 500)
      })
      return {
        title: this.title,
        path: '/pages/index/index?redType=axqVideo&id=' + this.id,
        imageUrl: this.thumbnail,
        promise,
        success: function (res) {
          this.toast('分享成功')
        }
      }
    }
  },
  computed: {
    likeImg () {
      let islike = true
      return this.prefixOssUrl(`icon/${islike ? 'no-' : ''}thumbs-up.png`)
    }
  },
  filters: {
    videoUrl (v) {
      if (v) return 'https:' + _.get(JSON.parse(v), '[0].oss.url')
      return ''
    },
    thumbnail (v) {
      if (v) return ossUrl + v
      return ''
    }
  },
  methods: {
    getVideoInfo (id) {
      AxqVideo.sendApi('videoInfo', {
        params: {},
        data: {
          query: {
            id
          }
        }
      }).then(res => {
        const {
          status,
          data,
        } = res;
        if (status) {
          this.videoInfo = data.axqVideo;
          this.recommendVideoList = data.recommendAxqVideoList;
        }
      })
    },
    shareVideo (e) {
      const {
        id,
        title,
        thumbnail
      } = e
      this.id = id
      this.title = title
      this.thumbnail = ossUrl + thumbnail
    }
  }
}
</script>

<style lang="less">
.video-info {
  background: @background-color-base;
  padding: 30rpx @box-gap;
  min-height: 100vh;

  .video-card {
    margin-bottom: 30rpx;
    background: #fff;
    border-radius: 20rpx;
    overflow: hidden;

    .wrap {
      video {
        width: 100%;
      }
    }

    .title {
      display: block;
      padding: 31rpx 20rpx 0;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .btm {
      .flexLayout(@j: flex-end, @a: center);
      padding: 31rpx 20rpx;
    }

    .share,
    .like {
      width: 150rpx;
      display: flex;
      align-items: center;
      justify-items: flex-end;
      font-size: 30rpx;
      font-weight: 500;
      color: #999;

      text {
        text-align: right;
      }

      .icon {
        margin-right: 12rpx;
        width: 32rpx;
        height: 32rpx;
      }

      .share-btn {
        margin: 0;
        padding: 0;
        background-color: transparent;
        font-size: 26rpx;
        color: #b5b5b5;

        &::after {
          border: none;
        }
      }
    }
  }

  .v-more {
    margin-top: 50rpx;
    margin-bottom: 10rpx;
    font-size: 35rpx;
    font-weight: bold;
  }
}
</style>